<template>
  <div>
    <headNav title="课程表"></headNav>
    <div v-if="!hide" class="headDivCss" >
      <span>暂无课程表</span>
    </div>
    <div v-if="hide" class="sch-p" ref="schP" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <div class="headerTitle flexCenter" style="" >
        <div style="height: 100%; width: .8rem;" ></div>
        <div class="flexCenter weekTextCss " v-for="(val, index) in weekArr" :key="index">
          <span>{{val.name}}</span>
        </div>
      </div>

      <div class="con-p">

        <div class="wookInDivCss" v-for="(value, i) in timeArr " :key="i" >
          <div class="wookInTextCss" >{{value.name}}</div>
          <div class="wookInSmallCss" >
            <div v-if="value.name == '上午'" class="wookInSmallCss-3" >
              <div v-for="(j, k) in morningArr" class="wookInSmallCss-3" >
                <div class="wookInSmallCss-2" v-for="(val, index) in j " v-if="val != k+1" >{{val}}</div>
              </div>
            </div>
            <div v-if="value.name == '下午'" class="wookInSmallCss-3">
              <div v-for="(j, k) in afternoonArr" class="wookInSmallCss-3" >
                <div class="wookInSmallCss-2" v-for="(val, index) in j " v-if="val != k+1" >{{val}}</div>
              </div>
            </div>
            <div v-if="value.name == '晚间自习'" class="wookInSmallCss-3">
              <div v-for="(j, k) in nightArr" class="wookInSmallCss-3" >
                <div class="wookInSmallCss-2" v-for="(val, index) in j " v-if="val != k+1" >{{val}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import {timeApi, newTimeApi} from '@/api/timetableApi'
export default {
  components: {
    headNav
  },
  data () {
    return {
      weekArr: [
        {id: 1, name: '周一'},
        {id: 2, name: '周二'},
        {id: 3, name: '周三'},
        {id: 4, name: '周四'},
        {id: 5, name: '周五'},
        {id: 6, name: '周六'},
        {id: 7, name: '周天'}
      ],
      timeArr: [],
      arr: '',
      hide: true,
      morningArr: '',   // 每个时段的数组
      afternoonArr: '',
      nightArr: '',
      allArr: ''
    }
  },
  computed: {
    ...mapState({
      classId: state => state.user.classId,
      gradeId: state => state.user.gradeId,
      schoolId: state => state.user.schoolId
    })
  },
  async mounted() {
    let parme = {
      SchoolId: this.schoolId,
      GradeId: this.gradeId,
      ClassId: this.classId
    }
    let res = await newTimeApi(parme)
    console.log(res)
    if (res.id == 0) {
      this.hide = false
    } else {
      this.allArr = res.classScheduleDetail
      this.morningArr = this.formatList(this.filter(1))
      this.afternoonArr = this.formatList(this.filter(2))
      this.nightArr = this.formatList(this.filter(3))
      if (this.morningArr.length > 0) {
        this.timeArr.push({id: 1, name: '上午'})
      }
      if (this.afternoonArr.length > 0) {
        this.timeArr.push({id: 2, name: '下午'})
      }
      if (this.nightArr.length > 0) {
        this.timeArr.push({id: 3, name: '晚间自习'})
      }
    }
  },
  methods: {
    touchstart (e) {
      var touch = e.targetTouches[0]
      this.startX = touch.clientX
      this.startY = touch.clientY

      this.left = this.$refs.schP.style.left

      this.$refs.schP.style.transition="left 0s"
    },
    touchmove (e) {
       var touch = e.targetTouches[0]
       var moveX = touch.clientX
      var moveY = touch.clientY
      var offsetX = moveX - this.startX
      var offsetY = moveY - this.startY

       // console.log(this.left, offsetX)
      if (this.left) {
        this.left = parseInt((this.left + '').replace('px', ''))
      } else {
        this.left = 0
      }

      this.$refs.schP.style.left = (this.left + offsetX) + 'px'

    },
    touchend () {
         this.$refs.schP.style.transition="left 0.5s"

         var left = this.$refs.schP.style.left
         if (left) {
            left = parseInt((left + '').replace('px', ''))
          } else {
            left = 0
          }

          if (left > 0) {
               this.$refs.schP.style.left = '0px'
          }

          var width = -this.$refs.schP.clientWidth
          var rp = 2 / 7
          if (left < (width * rp)) {
              this.$refs.schP.style.left = (width * rp) + 'px'
          }
    },
    // 过滤上午下午晚上课程
    filter (e) {
      let arr = []
      for (let val of this.allArr) {
        if (val.classScheduleType == e) {
          arr.push(val)
        }
      }
      return arr
    },
    // 处理课表数组封装
    formatList (list) {
        list.sort((a, b) => {
            return a.weekType - b.weekType
        })
        list.sort((a, b) => {
            return a.order - b.order
        })
        list.sort((a, b) => {
            return a.classScheduleType - b.classScheduleType
        })
        let arr = []
        for (let item of list) {
            let obj = this.isCreate(item, arr)
            if (obj) {
                obj['key' + item.weekType] = item.name
            } else {
                obj = {}
                obj.order = item.order
                obj['key' + item.weekType] = item.name
                arr.push(obj)
            }

        }
        return arr
    },
    isCreate (item, arr) {
        let flag = false
        for (let w of arr) {
          if (item.order == w.order) {
            return w
          }
        }
        return null
    }
  }
}
</script>

<style lang="less" scoped >
.con-p{
  position: relative;
  height: calc(100% - 1rem);
  width: 10rem;
  overflow-y: scroll;

}
.sch-p{
  height: calc(100% - 1rem);
  width: 9.5rem;
  position: relative;
}
.headDivCss {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
}

.headerTitle {
  width: 9.2rem;
  height: 0.6rem;
  margin: 0.1rem 0.2rem;
  border-radius: .15rem .15rem 0 0;
  background: #2bc292;
  .weekTextCss {
    height: 100%;
    width: 1.5rem;
    color: #fff;
    font-size: 0.3rem;
  }
}

.headerTitle2 {
  width: 9.2rem;
  height: 0.2rem;
  position: fixed;
  top: 0;
  margin: 0.8rem 0 0 0;
  background: #f4f4f4;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wookInDivCss {
  width: 9.2rem;
  margin: 0.1rem 0.2rem;
  border: 1px solid #d2e1e1;
  border-right: 0px;
  border-bottom: 0px;
  display: flex;

  // position: fixed;
  // top: 1rem;
  // -webkit-overflow-scrolling: touch;
}

.wookInTextCss {
  width: .6rem;
  // height: 3.28rem;
  border-right: 1px solid #d2e1e1;
  border-bottom: 1px solid #d2e1e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.25rem;
  color: #19c48d;
}

.wookInSmallCss {
  width: 10rem;
  // height: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.wookInSmallCss-2 {
  width: 1.215rem;
  height: 0.8rem;
  border-right: 1px solid #d2e1e1;
  border-bottom: 1px solid #d2e1e1;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wookInSmallCss-3 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.wookInSmallCss-2:nth-child(6){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(7){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(8){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(9){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(10){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(16){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(17){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(18){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(19){
  background: #e0f7f6;
}
.wookInSmallCss-2:nth-child(20){
  background: #e0f7f6;
}
</style>
